<template>
	<view class="info-block" :class="{standard:standard,form:form}" :style="customStyle">
		<view class="info-block__inner" :style="customInnerStyle">
			<view v-if="header" class="jcsb info-block__inner__header">
				<slot name="header"></slot>
				<view v-if="headerRight" class="flex aic jcfe">
					<slot name="header-right">
						<text show class="edit-button" @click.stop="tapEdit">编辑</text>
					</slot>
				</view>
			</view>
			<slot />
		</view>
	</view>
</template>
<script lang="ts">
	import { defineComponent } from "vue"
	export default defineComponent({
		// #ifdef MP-WEIXIN
		options: {
			virtualHost: true,
			// styleIsolation: 'shared'
		},
		// #endif
	})
</script>
<script setup lang="ts" name="InfoBlock">
	import type { CSSProperties } from 'vue';
	import { defineProps, defineEmits, withDefaults } from 'vue';
	const emit = defineEmits<{ editClick : [] }>();
	withDefaults(defineProps<{
		standard ?: boolean;
		form ?: boolean;
		header ?: boolean;
		headerRight ?: boolean;
		customStyle ?: CSSProperties;
		customInnerStyle ?: CSSProperties;
	}>(), {
		standard: false,
		header: false,
		form: false,
		headerRight: false,
		customStyle: () => ({}),
		customInnerStyle: () => ({}),
	});

	function tapEdit() {
		emit('editClick');
	}
</script>

<style lang="scss">
	.info-block {
		display: inline-flex;
		flex-shrink: 0;
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;

		&+.info-block {
			margin-top: 20rpx;
		}

		&__inner {
			display: inline-flex;
			flex-direction: column;
			flex-shrink: 0;
			width: 100%;
			padding: 18rpx 0;
			background: #FFFFFF;
			border-radius: 8rpx;
			box-sizing: border-box;

			&__header {
				display: inline-flex;
				padding: 20rpx 20rpx 30rpx 20rpx;
				line-height: 38rpx;
				box-sizing: border-box;
				color: #000000;
				font-size: 32rpx;
				font-weight: 600;

				.edit-button {
					color: #ff710a;
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
				}
			}
		}

		&.standard {
			.info-block__inner {
				padding: 32rpx;
			}

			.info-block__inner__header {
				padding: 0 0 32rpx 0;
			}
		}

		&.form {
			.info-block__inner {
				padding: 30rpx 32rpx 0 32rpx;
			}
		}
	}
</style>